<template xmlns="http://www.w3.org/1999/html">

  <div class="
    white-module">
    <div class="scholl-tabs">
      <el-upload v-if="updateForm.pid!=0" class="tabs-btn"
          style="right: 140px;"
          :before-upload="beforeUpload"
          :on-success="handleAvatarSuccess"
          :action="uploadUrl"
          :headers="headers"
          :data="updateForm"
          multiple
          :show-file-list="false"
          :on-exceed="handleExceed">
        <el-button  type="primary">上传文件</el-button>
      </el-upload >

      <el-button v-if="updateForm.pid!=0" class="tabs-btn" type="primary" @click="mkdir">新增文件夹</el-button>
      <el-tabs v-model="activeName">
        <el-tab-pane label="私域空间" name="first"></el-tab-pane>
      </el-tabs>
    </div>
    <el-row class="search-module">
      <el-col class="search-left" :span="16">
        文件名称：<el-input placeholder="请输入文件名称" v-model="dataForm.like_name"/>&nbsp;&nbsp;<span>已使用：{{remianSizeStr}}</span>
        <span style="margin-left: 30px;"><label :style="userInfo.dueFlag==='1'?'color:red':''"> 到期时间：{{userInfo.dueDate}} </label></span>
        <span class="interval"></span>
      </el-col>
      <el-col class="right-btn" :span="8">
        <el-button type="primary" @click="backPath" >返回上一级</el-button>
        <el-button type="primary" @click="query">查询</el-button>
        <el-button type="default" @click="clearQuery">重置</el-button></el-col
      ></el-row
    >
    <div class="global-table">
      <el-table
        :data="dataList"
        :header-cell-style="{
          background: '#F5F7FA',
          color: '#333',
        }"
        style="width: 100%"
      >

        <el-table-column prop="name" label="文件名" show-overflow-tooltip >
          <template #default="scope" @click="openFile(scope.row)">
            <div class="folder"  @click="openFile(scope.row)">
              <img v-if="scope.row.isFolder==1" src="@/assets/classroom/folder.png" />

              <i  class="el-icon-document-copy"></i>


              {{ scope.row.name }}
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="size" label="大小" >
          <template #default="scope">
            {{ Math.round(scope.row.sumSize/1024) }}KB
          </template>

        </el-table-column>

        <el-table-column label="操作" width="130" fixed="right">
          <template #default="scope">
            <el-button type="text" size="small" @click="deleteFile(scope.row.id)"> 删除 </el-button>
            <el-button v-if="scope.row.isFolder==1" type="text" size="small" @click="openFile(scope.row)"> 打开</el-button>
            <el-button v-if="scope.row.isFolder==0" type="text" size="small" @click="downFile(scope.row.url,scope.row.name)"> 下载</el-button>
          </template>
        </el-table-column>


      </el-table>
    </div>

    <el-row class="global-pagination" >
      <el-col :span="8" class="total"> 共搜索 {{total}} 条数据   剩余空间</el-col>
      <el-col :span="16">
        <el-pagination
            background
            layout="  prev, pager, next, jumper"
            :current-page="page"  :page-sizes="[10, 20, 50, 100]" :page-size="limit"
            :total="total"
            :small="false"
            :disabled="false"
            @size-change="remianSize"
            @current-change="pageCurrentChangeHandle"
        />
      </el-col>
    </el-row>
  </div>
  <!--添加文件夹-->
  <el-dialog title="添加文件夹" v-model="showMkdir">
    <el-form :model="updateForm">
      <el-form-item label="文件夹" :label-width="formLabelWidth">
        <el-input v-model="updateForm.name" autocomplete="off"></el-input>
      </el-form-item>

    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="showMkdir = false">取 消</el-button>
      <el-button type="primary" @click="submitMkdir">确 定</el-button>
    </div>
  </el-dialog>

  <el-dialog title="上传文件" v-model="whowUploadFile">
    <el-form :model="updateForm">
      <el-form-item label="文件夹" :label-width="formLabelWidth">
        <el-input v-model="updateForm.name" autocomplete="off"></el-input>
      </el-form-item>

    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="showMkdir = false">取 消</el-button>
      <el-button type="primary" @click="submitMkdir">确 定</el-button>
    </div>
  </el-dialog>

</template>

<script lang="ts" >

import { defineComponent, reactive, toRefs,ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import listService from "@/service/listService";
import baseService from "@/service/baseService";
import {IObject} from "@/types/interface";
import app from "@/constants/app";
import {getCache, getToken} from "@/utils/cache";

export default defineComponent({

  setup() {


    const state = reactive({
      isTabs:true,
      uploadUrl:app.api+"/fii/front/space/uploadFile",
      headers:{tokenId:getToken()},
      showMkdir:false,
      whowUploadFile:false,
      getDataListURL: "/fii/front/space/page",
      getDataListIsPage: true,
      deleteURL: "/pay/order",
      isNavCollapse:true,
      activeName:"first",
      addFormShow:false,
      editSchoolShow:false,
      deleteIsBatch: true,
      formLabelWidth: '120px',
      remianSizeStr:"100/100",
      updateForm:{
        pid:0,
        name:""
      },
      dataForm: {
        orderId: "",
        eq_pid_int:"0",
        like_name:"",
        status: "",
        like_schoolName: ""
      },
      addForm: {
        schoolName: ""

      },
      userInfo: {}
    });
    const pageinfo = { ...listService(state), ...toRefs(state) };
    return pageinfo;
  },mounted() {
    this.remianSize();
    this.userInfo = getCache('CacheToken', { isSessionStorage: true }, {})
  },

  methods: {

    /**
     * 重置
     * */
    clearQuery(){
      this.dataForm.like_name="";
    },
    //删除
    deleteFile(id:any){

      ElMessageBox.confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        baseService
            .post("fii/front/space/deleteFile", {id:id})
            .then((res) => {
              this.remianSize();
            });
      }).catch(() => {
      });

    },
    //查询剩余大小
    remianSize(){
      this.query();
      baseService
          .post("fii/front/space/remainSize", {})
          .then((res) => {
            this.remianSizeStr=res.data;
          });

    },

    /**
     * excel、pdf、word、txt 、图片 通过浏览器打开，触发后台下载；
     * rar、视频直接从oss下载；
     * @param url
     * @param filename
     */
    downFile(url:string,filename:string){
      if(url.indexOf(".rar")>0 || url.indexOf(".zip")>0 || url.indexOf(".mp4")>0){
        window.open(url);
      }else{
        baseService.downloadOss(url,{},filename);
      }
    },

    /**
     * 返回上一级
     */
    backPath(){
      baseService
          .get("fii/front/space/page", {eq_id_int:this.dataForm.eq_pid_int})
          .then((res) => {
                ;
            this.dataForm.eq_pid_int=res.data.list[0].pid;
            this.updateForm.pid=res.data.list[0].pid;
                this.remianSize();
              }
          );
    },

    handleAvatarSuccess(response:IObject, file:any, fileList:any[]){
      if(response.code==500){
        ElMessage.error(response.msg);
      }
      this.remianSize();
    },
    /***/
    openFile(row:IObject){
      if(row.isFolder==1){
        this.dataForm.eq_pid_int=row.id;
        this.updateForm.pid=row.id;
        this.remianSize();
        console.log(row);
      }

    },
    /**
     * 船舰文件夹
     * */
    mkdir(){
      if(this.updateForm.pid==0){
        ElMessage.error("请选择目录");
        return;
      }
        this.showMkdir = true;
        this.updateForm.name='';
    },submitMkdir(){

      baseService
          .post("fii/front/space/mkdir", this.updateForm)
          .then((res) => {
                  this.showMkdir=false;
            this.remianSize();
              }
          );
    },
    payHandle(orderId: string) {
      //window.open(`${app.api}/pay/alipay/webPay?orderId=` + orderId);
    },
    editForm(row: any) {
      this.editSchoolShow =true;
      this.$nextTick(()=>{
        if( this.$refs.editSchool){
          const a:any=this.$refs.editSchool;
          a.init(row);
        }

      })
      //window.open(`${app.api}/pay/alipay/webPay?orderId=` + orderId);
    },
    add(row: any) {
      this.editSchoolShow =true;
      this.$nextTick(()=>{
        if( this.$refs.editSchool){
          const a:any=this.$refs.editSchool;
          a.init({});
        }

      })
      //window.open(`${app.api}/pay/alipay/webPay?orderId=` + orderId);
    },

    beforeUpload(file: any) {
      // 设定最大文件大小为100MB
      const MAX_SIZE = 1024 * 1024 * 100;
      if (file.size > MAX_SIZE) {
        ElMessage.error("文件大小不能超过100MB");
        return false;
      }
      return true;
    }



  }
});
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" >
.search-module {
  display: flex;
  justify-content: space-between;
  padding: 0px 20px 0px 20px;
  margin-top: 10px;
  .interval {
    padding: 0px 15px;
  }

  .search-left {
    color: #333333;
    text-align: left;
  }
  .right-btn {
    text-align: right;
  }
}
.global-table {
  margin-top: 15px;
  padding: 0px 20px;

  .folder {
    display: flex;
    align-items: center;
    img {
      width: 24px;
      height: 24px;
      margin-right: 8px;
    }
  }

}

.popper-menu {
  border: 0px !important;
  .el-menu {
    padding: 0px !important;
    background-color: #008fd1 !important;
    .el-menu-item-group__title {
      padding: 0px;
    }
    .el-menu-item:hover {
      background-color: #ffffff !important;
      color: #00a0e9;
    }

    .el-menu-item.is-active {
      background-color: #ffffff !important;
    }
  }
}
</style>
